<layout name="page" />
<block name="style">
	<style>
		.table .pl0 {
			padding-left: 0px;
		}
		.table .pl1 {
			padding-left: 20px;
		}
		.table .pl2 {
			padding-left: 40px;
		}
		.table .pl3 {
			padding-left: 60px;
		}
		.table .pl4 {
			padding-left: 80px;
		}
	</style>
</block>
<block name="content">
	{:widget('page_header/simple',array('name'=>'权限组管理'))}
	<form id="form_search" name="form_search" method="post" action="" >
		<div class="operate-panel">
			<div class="input-box w10" style="display:flex;margin-right: 4px;">
				<select name="eq_pid" id="eq_pid" class="select w10" lay-filter="pid" >
					<option value="#">全部</option>
					{:fill_option($group_list)}
				</select>
				<i class="icon"></i>
			</div>
			<i class="mid"></i>
			<a class="btn btn-normal" onclick="save()">保存</a>
		</div>
	</form>
	<div class="x1 sub box">
		<div class="w30 m100" style="margin-bottom: 20px;">
			<form id="form_user" name="form_user" method="post" >
				<div class="table">
					<ul>
						<li class="thead" >
							<span class="w10">ID</span>
							<span class="w10 x1">名称</span>
						</li>
						<foreach name="list" val="data">
							<li class="tbody" data="{$data.id}">
								<span class="w10">{$data.id}</span>
								<span class="w10 x1">{$data.name}</span>
							</li>
						</foreach>
					</ul>
				</div>
			</form>
			{$page}
		</div>
		<div style="width:16px;"></div>
		<div class="x1 w30 m100" >
			<form id="form_data" method="post" action="" >
				<input type="hidden" name="ajax" id="ajax" value="1">
				<input type="hidden" name="role_id" id="role_id">
				<input type="hidden" name="org_node_list" id="org_node_list">
				<input type="hidden" name="node_list" id="node_list">
				<div class="table">
					<ul>
						<li class="thead" >
							<span class="w3" ><label class="checkbox">
									<input class="toggle-select-all" type="checkbox" data="node_id[]" />
									<i class="icon"></i></label></span>
							<span class="w10 x3">菜单</span>
							<span class="w4 x1"><label class="checkbox">
									<input class="toggle-select-all" type="checkbox" data="read[]" />
									<i class="icon"></i> 访问</label></span>
							<span class="w4 x1"><label class="checkbox">
									<input class="toggle-select-all" type="checkbox" data="write[]" />
									<i class="icon"></i>编辑</label></span>
							<span class="w4 x1"><label class="checkbox">
									<input class="toggle-select-all" type="checkbox" data="admin[]" />
									<i class="icon"></i>管理</label></span>
						</li>
						<foreach name="node_list" val="data">
							<li class="tbody" >
								<span class="w3"><label class="checkbox">
										<input  type="checkbox"  name="node_id[]"  value="{$data.id}" />
										<i class="icon"></i></label></span>
								<span class="w10 x3"><i class="pl{$data.level}"></i>{$data.name}</span>
								<if condition="$data['pid']!=0 && strpos($data['url'],'/index')||strpos($data['url'],'##')!==false">
									<span class="w4 x1"> <label class="checkbox">
											<input  type="checkbox" name="read[]" value="{$data.id}" />
											<i class="icon"></i></label></span>
									<span class="w4 x1"> <label class="checkbox">
											<input  type="checkbox" name="write[]" value="{$data.id}" />
											<i class="icon"></i></label></span>
									<span class="w4 x1"> <label class="checkbox">
											<input  type="checkbox" name="admin[]" value="{$data.id}" />
											<i class="icon"></i></label></span>
									<else/>
									<span class="w4 x1"></span>
									<span class="w4 x1"></span>
									<span class="w4 x1"></span>
								</if>
							</li>
						</foreach>
					</ul>
				</div>
			</form>
		</div>
	</div>
</block>
<block name="js">
	<script type="text/javascript">
		layui.use(['global'], function() {
			var $ = layui.jquery;
			set_return_url(null);
			set_val('eq_pid', '{$eq_pid}');
			var fn = {
				save : function() {
					if ($("#role_id").val() == '') {
						layer.msg('请选择权限组');
						return false;
					};
					$("#node_list").val('');
					$("#form_data input[name='node_id[]']:checked").each(function() {
						$("#node_list").val($("#node_list").val() + $(this).val() + ",");
					});
					send_form("form_data", "{:url('set_node')}", "{:url('node')}", function(ret) {
						if (ret.status) {
							layer.msg(ret.info);
						}
					});
				},
			};
			win_exp(fn);

			$('#eq_pid').on('change', function() {
				$('#form_search').submit();
			});

			$("#form_user .table li").click(function() {
				$("#form_user .table li").removeClass("active");
				$this = $(this);
				$this.addClass("active");
				$("#role_id").val($this.attr("data"));

				if ($("#form_user li.active input:checked").length == 0) {
					$("#form_user li.active input").prop('checked', true);
				} else {
					$("#form_user li.active input").prop('checked', false);
				}
				vars = {};
				vars.role_id = $this.attr("data");
				send_ajax("{:url('get_node_list')}", vars, function(data) {
					show_data(data);
				});
				return false;
			});

			function show_data(result) {
				$("#form_data input").each(function() {
					$(this).prop("checked", false);
					//$(this).parents("td").removeClass("active");
				});
				for (var s in result.data) {
					$("#form_data input[name='node_id[]'][value=" + result.data[s].node_id + "]").prop("checked", "true");

					if (result.data[s].admin == 1) {
						$("#form_data input[name='admin[]'][value=" + result.data[s].node_id + "]").prop("checked", "true");
					}
					if (result.data[s].write == 1) {
						$("#form_data input[name='write[]'][value=" + result.data[s].node_id + "]").prop("checked", "true");
					}
					if (result.data[s].read == 1) {
						$("#form_data input[name='read[]'][value=" + result.data[s].node_id + "]").prop("checked", "true");
					}
				};
				$("#org_node_list").val('');
				$("#form_data input[name='node_id[]']:checked").each(function() {
					$("#org_node_list").val($("#org_node_list").val() + $(this).val() + ",");
				});
				$("#opmode").val("edit");
			};
		});

	</script>
</block>